/**
* 学生试卷详情
**/ 

<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title[0] }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title[1] }}</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>{{ title[1] }}</h3>
      </el-header>

      <el-main>
        <div style="width: 80%; margin: auto;
  position: relative;">
          <el-descriptions title="基本信息"
                           :column="2"
                           border>
            <el-descriptions-item>
              <template slot="label">
                试卷编号
              </template>
              {{ tableData.id }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                试卷名称
              </template>
              {{ tableData.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                试卷难度
              </template>
              {{ tableData.diffculty == '' ? '未设置' : tableData.diffculty }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                试卷状态
              </template>
              {{ tableData.status == 'y' ? '已启用' : '未启用' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                试卷总分
              </template>
              {{ tableData.score }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                学生得分
              </template>
              {{ tableData.userscore }}
            </el-descriptions-item>
          </el-descriptions>

        </div>
        <p></p>
        <div style="width: 80%; margin: auto;
  position: relative;">
          <strong>题目详情</strong>
          <p></p>
          <div>
            <!-- 查询题目 -->
            <div v-for="item in editForm"
                 :key="item.id"
                 :value="item">
              <el-descriptions title=""
                               v-if="item.text">
                <el-descriptions-item label="阅读">{{item.text}}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="">
                <el-descriptions-item label="题干">{{ item.topic }}</el-descriptions-item>
              </el-descriptions>
              <el-tag :a="item.score"
                            type="success"
                            effect="">
                      本题分数{{item.score}}
                    </el-tag>
                    <el-tag :a="item.result.score"
                            type="info"
                            effect="">
                      本题得分{{item.result.score}}
                    </el-tag>
              <el-table :data="item.opList">
                <el-table-column label="选项"
                                 show-overflow-tooltip>
                  <template slot-scope="scope">{{ scope.row.opt }}
                    <el-tag v-if="scope.row.status === 'y'"
                            type="success"
                            effect="dark">
                      正确答案
                    </el-tag>
                    <el-tag v-if="item.result.opt == scope.row.id"
                            type="info"
                            effect="dark">
                      你的答案
                    </el-tag>
                    <span v-if="item.typeid == 2">
                      <span v-for="i in 4"
                            :key="i">
                        <el-tag v-if="item.result.opt[i - 1] == scope.row.id"
                                type="info"
                                effect="dark">
                          你的答案
                        </el-tag>
                      </span>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getPaperById } from '../../api/paperMG'
import { findExam } from '../../api/exam'
export default {
  // 模块名字
  name: 'template',
  // 模块数据
  data() {
    //数据
    return {
      //传入id
      id: '',
      //面包屑标签
      title: '',
      //试卷详细信息
      tableData: [],
      //试题id
      questions: [],
      //题目详情信息
      editForm: {
        topic: '',
        options: [],
        typeid: '',
        text: '',
      },
      editform: [],
    }
  },
  methods: {},
  //创建完毕的状态
  created() {
    //导航坐标
    this.title = this.$route.name.split('/')
    //查询对应考试试卷
    findExam(this.$route.query.b).then((res) => {
      let a = res.data.data
      this.id = a.pid
      getPaperById(this.id).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data
          this.tableData['score'] = a.score
          this.tableData['userscore'] = a.userscore
          this.editForm = JSON.parse(this.tableData.item)
          let result = JSON.parse(a.result).result
          //循环遍历this.editForm，给每一题添加result属性
          for (var key in this.editForm) {
            this.editForm[key].result = result[key]
          }
          console.log(this.editForm)
        }
      })
    })
  },
}
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>